Saltar al contenido principal
Disclaimer

The mentioned functionalities may be restricted depending on the purchased software license.

Gestión de plantillas de exhibición pública

Las plantillas de exhibición pública son la base de tus visualizaciones personalizadas. Definen el diseño, la estructura y los elementos visuales que se aplicarán a tus instalaciones. Esta guía integral cubre todo, desde la creación básica de plantillas hasta técnicas de diseño avanzadas.

📋 Resumen​

¿Qué son las Plantillas de exhibición pública?​

Las plantillas sirven como planos reutilizables que:

  • 📐 Definen diseños visuales para tus exhibiciones públicas
  • 🧩 Organizan bloques de contenido y su posicionamiento
  • 🎨 Establecen consistencia en el diseño a través de múltiples instalaciones
  • ⚙️ Permiten un despliegue rápido de visualizaciones estandarizadas
  • 🔄 Soportan actualizaciones fáciles en todas las configuraciones vinculadas

Beneficios clave​

BeneficioDescripción
🚀 EficienciaCrea una vez, usa en múltiples instalaciones
🎯 ConsistenciaMantiene estándares de diseño uniforme
🔧 FlexibilidadModificación fácil sin recrear desde cero

🚀 Comenzando​

Flujo de trabajo de plantillas​

  1. 📐 Diseñar diseño - Planifica tu estructura visual
  2. 🎨 Crear plantilla - Construir usando el editor de plantillas
  3. 💾 Guardar plantilla - Almacenar para reutilizar en instalaciones

Requisitos previos​

Antes de crear plantillas, asegúrate de tener:

  • ✅ Cuenta de SmartgridX con permisos apropiados
  • ✅ Objetivos de diseño claros para tu visualización
  • ✅ Requisitos de contenido (imágenes, puntos de datos, diseños)

🎛️ Interfaz de gestión de plantillas​

Accediendo al Gestor de Plantillas​

infographicimage

Pasos de navegación:

  1. Iniciar sesión en tu cuenta de SmartgridX
  2. Navegar a 'Exhibiciones públicas' en la barra lateral principal
  3. Hacer clic en el botón 'Plantilla de exhibición pública' en la página de resumen

Esto abre la interfaz de gestión de plantillas donde puedes ver, crear, editar y eliminar plantillas.

Tabla de resumen de plantillas​

infographicimage

Acciones disponibles:

  • ➕ Agregar - Botón verde para iniciar la creación de plantillas
  • ✏️ Editar - Modificar el diseño de la plantilla existente
  • 🗑️ Eliminar - Retirar plantilla no utilizada

🎨 Proceso de creación de plantillas​

Iniciar una nueva plantilla​

Haz clic en el botón "Crear nueva plantilla" para abrir la interfaz del editor de plantillas.

Configuración de encabezado de plantilla​

infographicimage

Configuración del título​

Título de plantilla:

  • Propósito: Identifica la plantilla en listas y configuraciones
  • Mejores prácticas: Usa nombres descriptivos y específicos del proyecto
  • Ejemplos: "Tablero-KPI-Fábrica", "Diseño-Monitoreo-Energía", "Exhibición-Multi-Zona"

Configuración de márgenes​

La configuración de márgenes define el área segura desde los bordes de la exhibición:

Control deslizante de margen (0-100px):

  • 📐 Rango: 0 a 100 píxeles desde el borde de la exhibición
  • 🎯 Propósito: Crea un espaciado seguro para prevenir cortes de contenido
  • 📱 Aplicación: Asegura visibilidad en varios tipos de exhibiciones
  • ⚙️ Recomendación: Usa 10-20px para exhibiciones estándar, 30-50px para pantallas de borde a borde

Impacto visual:

  • 0px de margen - El contenido se extiende a los bordes de la exhibición
  • 50px de margen - El contenido comienza 50 píxeles desde todos los bordes
  • 100px de margen - Área segura máxima con espaciado de borde sustancial

Funcionalidad de guardado​

El botón de guardar 💾 (esquina superior derecha) te permite guardar tu plantilla actual.

🧩 Sistema de diseño de bloques​

Entendiendo el sistema de cuadrícula​

infographicimage

Fundamentos de la cuadrícula​

El editor de plantillas utiliza un sistema de cuadrícula basado en porcentajes de 100×100:

Propiedades de la cuadrícula:

  • 📐 Dimensiones: 100 unidades de ancho × 100 unidades de alto
  • 📊 Unidades: Valores porcentuales (1 unidad = 1% de la dimensión total)
  • 🎯 Precisión: Permite posicionamiento y dimensionamiento exactos
  • 📱 Responsive: Se adapta automáticamente a diferentes tamaños de pantalla

Ejemplos de diseño de bloques​

Configuración: 100 de ancho × 100 de alto
Resultado: Cobertura de pantalla completa
Caso de uso: Visualización grande única, imagen en pantalla completa

┌─────────────────────────────────┐
│                                 │
│         BLOQUE COMPLETO         │
│                                 │
│                                 │
└─────────────────────────────────┘

Manipulación de bloques​

Agregando bloques​

Método: Haz clic en el botón "Agregar Bloque" (esquina superior derecha del editor)
Resultado: Aparece un nuevo bloque con dimensiones predeterminadas
Próximos pasos: Posiciona y redimensiona según sea necesario

Posicionando bloques​

Arrastrar y soltar:

  • 🖱️ Haz clic y mantén cualquier bloque para moverlo
  • 📍 La vista previa en tiempo real muestra la posición mientras arrastras
  • 🧲 Alineación con la cuadrícula ayuda con la alineación precisa
  • 👁️ Guías visuales aparecen para ayudar con la alineación

Redimensionando bloques​

Control de redimensionamiento:

  • 📐 Esquina inferior derecha muestra el control de redimensionamiento cuando el bloque está seleccionado
  • 🔧 Arrastra para redimensionar tanto el ancho como la altura simultáneamente
  • 📊 Valores en tiempo real muestran las dimensiones actuales

Controles de precisión​

infographicimage

Panel de posición del lado derecho​

Cuando se selecciona un bloque, el panel derecho proporciona:

Controles de posición:

  • 📍 Posición X - Desplazamiento horizontal desde el borde izquierdo (0-100)
  • 📍 Posición Y - Desplazamiento vertical desde el borde superior (0-100)
  • 🎨 Índice Z - Orden de capas para bloques superpuestos
  • 📏 Ancho - Porcentaje de ancho del bloque (1-100)
  • 📏 Altura - Porcentaje de altura del bloque (1-100)

⚙️ Configuración de bloques​

Tipos y propiedades de bloques​

infographicimage

Accediendo a la configuración de bloques​

Método:

  1. Selecciona un bloque en el lienzo del editor
  2. El panel de configuración aparece en la parte inferior de la pantalla
  3. El menú desplegable de tipo de bloque es la opción de configuración principal

Nota: No todos los bloques son configurables actualmente. Esto cambiará a medida que continúe el desarrollo. Se agregarán más tipos de bloques en futuras actualizaciones.

Tipos de Bloques Disponibles​

Propósito: Mostrar imágenes estáticas, logotipos, fondos, GIFs
Opciones de configuración:

  • 📁 Fuente de imagen - Subida o URL que se utilizará como predeterminada para este bloque. Puede dejar esto vacío si desea forzar que se seleccione una imagen en la configuración.

Casos de uso:

  • Logotipos y marca de la empresa
  • Imágenes de fondo
  • Fotos de equipos
  • GIFs

Ejemplos de Plantillas​

imageninfografica

Este ejemplo demuestra una plantilla bien estructurada con:

  • 📊 Organización clara de bloques con etiquetas descriptivas
  • 📐 Espaciado y alineación adecuados
  • 🎯 Tipos de bloques funcionales para diferentes necesidades de contenido

Nomenclatura de bloques en este ejemplo:

  • Cada bloque muestra su propósito destinado
  • Etiquetas claras ayudan con la configuración
  • Organización lógica apoya el mantenimiento

📚 Documentación Relacionada​

Próximos Pasos​

Después de crear su plantilla:

  1. ⚙️ Configurar Instalaciones - Aplicar plantillas a instalaciones específicas
  2. 🎛️ Conectar Controladores - Conectarse a hardware de visualización
  3. 🚀 Guía para Empezar - Visión general del flujo de trabajo

Temas Avanzados​

  • 🎨 Técnicas de Diseño Avanzadas
  • 📊 Integración de Datos Personalizados
  • 🔄 Actualizaciones Automatizadas de Plantillas
  • 👥 Colaboración en Plantillas Multiusuario

💡 Resumen de Mejores Prácticas​

Diseño de Plantillas​

✅ Principios de diseño:

  • 🎯 Mantenerlo simple - Enfocarse en la información esencial
  • 📱 Diseñar de manera responsiva - Probar en diferentes tamaños de pantalla
  • 🎨 Mantener la consistencia - Usar colores y diseños estandarizados

Gestión de Plantillas​

✅ Consejos de organización:

  • 📝 Usar nombres descriptivos - Hacer que las plantillas sean fáciles de encontrar
  • 🔄 Mantenimiento regular - Eliminar plantillas no utilizadas
  • 👥 Compartir estándares - Asegurar la consistencia del equipo

🎨 ¿Listo para Diseñar? Con su plantilla creada y configurada, ¡está listo para implementar visualizaciones impresionantes en sus instalaciones SmartgridX!